<template>
  <div class="main">
    <div class="title">
      <div class="name">
        <img src="@/assets/imgs/icon.png" alt="monitor" />
        <a>监控列表</a>
      </div>
    </div>

    <table class="monitor-table">
      <thead>
        <tr>
          <th class="col-unit">单位名</th>
          <th class="col-gateway">网关数</th>
          <th class="col-device">设备数</th>
          <th class="col-point">据点数</th>
          <th class="col-alarm">报警</th>
          <th class="col-action">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.unit }}</td>
          <td>{{ item.gateways }}</td>
          <td>{{ item.devices }}</td>
          <td>{{ item.points }}</td>
          <td>{{ item.alarms }}</td>
          <td>
            <button class="btn-alarm" @click="showAlarm">报警记录</button>
            <button class="btn-history" @click="showHistory">历史数据</button>
            <button class="btn-config" @click="showApply">组态应用</button>
          </td>
        </tr>
      </tbody>
    </table>
    <history v-if="isHistoryVisible" :showBlur="isHistoryVisible" @close="isHistoryVisible = false"/>
    <alarm v-if="isAlarmVisible" :showBlur="isAlarmVisible" @close="isAlarmVisible = false"/>
    <apply v-if="isApplyVisible" :showBlur="isApplyVisible" @close="isApplyVisible = false"/>

  </div>
</template>

<script>
import Alarm from '@/components/visualization/alarm.vue';
import Apply from '@/components/visualization/apply.vue';
import History from '@/components/visualization/history.vue';

export default {
  components: {
    Alarm,
    Apply,
    History
  },
  data() {
    return {
      tableData: [
        // 示例数据
        { unit: '宝钢', gateways: 200, devices: 400, points: 5000, alarms: '无' },
        { unit: '造纸厂', gateways: 3000, devices: 2000, points: 1000, alarms: '无' },
        { unit: '锅炉厂', gateways: 1500, devices: 1000, points: 500, alarms: '无' },
        { unit: '锅炉二厂', gateways: 1500, devices: 300, points: 1200, alarms: '温度上限报警>120' },
        { unit: '锅炉三厂', gateways: 1000, devices: 800, points: 200, alarms: '无' },
        { unit: '锅炉四厂', gateways: 1000, devices: 800, points: 200, alarms: '无' },
        { unit: '锅炉厂A', gateways: 1300, devices: 300, points: 1200, alarms: '温度上限报警>120' },
        { unit: '锅炉厂B', gateways: 1500, devices: 300, points: 100, alarms: '无' },
        { unit: '锅炉厂C', gateways: 1000, devices: 800, points: 1200, alarms: '温度上限报警>120' },
        { unit: '锅炉厂D', gateways: 1500, devices: 300, points: 200, alarms: '温度上限报警>120' },
      ],
      isAlarmVisible: false,
      isApplyVisible: false,
      isHistoryVisible: false  // 添加历史弹窗状态控制
    }
  },
  methods: {
    showAlarm() {
      this.isAlarmVisible = true;
    },
    showApply() {
      this.isApplyVisible = true;
    },
    showHistory() {  // 确保这个方法存在
      this.isHistoryVisible = true;
    }
  }
}
</script>

<style scoped>
.main {
  /* 保持原有定位属性不变 */
  height: 60vh;
  width: 73%;
  background-color: #0d2b55;
  position: absolute;
  right: 1%;
  top: 100vh;
  margin-top: 5px;
}
.title{
  height: 5vh;
  width: 100%;
  background-color: #0e4ae0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.name{
  display: flex;
  align-items: center;
  gap: 10px;
}
.name a{
  color: #fff;
  font-size: 25px;
}
img{
  width: 30px;
}

.monitor-table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
  /* margin-top: 10px; */
  border: 2px solid #3a4b6d;  /* 新增外边框 */
}

.monitor-table th,
.monitor-table td {
  padding: 12px;
  text-align: center;
  border: 1px solid #3a4b6d;  /* 替换原来的border-bottom */
}

.monitor-table th {
  background-color: #1a2b4d;
  border-bottom: 2px solid #3a4b6d;  /* 加粗表头底部边框 */
}

.btn-alarm,
.btn-history,
.btn-config {
  padding: 6px 12px;
  margin: 0 3px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.btn-alarm {
  background-color: #e74c3c;
}

.btn-history {
  background-color: #3498db;
}

.btn-config {
  background-color: #2ecc71;
}

button:hover {
  opacity: 0.8;
}


.monitor-table th.col-unit { width: 10%; }
.monitor-table th.col-gateway { width: 12%; }
.monitor-table th.col-device { width: 12%; }
.monitor-table th.col-point { width: 18%; }
.monitor-table th.col-alarm { width: 20%; }
.monitor-table th.col-action { width: 20%; }

/* 优化操作列按钮布局 */
.monitor-table td button {
  padding: 4px 6px;
  margin: 0 1px;
  font-size: 12px;
  white-space: nowrap;
}
.monitor-table td {
  justify-content: center;
  gap: 2px;
}
</style>

// 在文件末尾添加组件挂载
<history v-if="isHistoryVisible" :showBlur="isHistoryVisible" @close="isHistoryVisible = false"/>

